<template>
	<z-nav-bar :title="courseInfo.name" :isBlack="false" transparentTitle="auto"></z-nav-bar>
	<view class="flex_sbc">
		<view v-if="courseInfo.beginTime" class="uni-white">
			<view>预约时间</view>
			<view class="z-font-36 text-w">{{ courseInfo.beginTime }}</view>
		</view>
		<view v-else></view>
		<navigator
			v-if="startState == 1 && courseInfo.status != 2"
			url="/pages/player/course/course-edit"
			class="add-question"
			hover-class="none"
		>
			编辑
		</navigator>
	</view>
	<view class="uni-white z-font-32 uni-mt-4 uni-pb-20">
		问题：{{ courseInfo.relQuestionSchemeList ? courseInfo.relQuestionSchemeList.length : 0 }}项
	</view>
	<navigator
		v-for="(question, index) in courseInfo.relQuestionSchemeList"
		:key="question.id"
		:url="'/pages/course/question-details/question-details?index=' + index"
		class="common-box flex_fs"
		hover-class="none"
	>
		<view class="left-line"></view>
		<view class="width-100">
			<view class="flex_sbc">
				<view class="z-font-32 text-w u-line-1">{{ question.name }}</view>
				<view class="flex_fsc flex_sh">
					<view
						v-if="startState == 1 && courseInfo.result && courseInfo.status != 2"
						class="button-comm uni-ml-20"
						:class="[courseInfo.result[question.id] && courseInfo.result[question.id].trainingState ? 'unactivated' : 'active']"
					>
						{{ courseInfo.result[question.id] && courseInfo.result[question.id].trainingState ? '已完成' : '开始训练' }}
					</view>
					<view v-else class="button-comm unactivated uni-ml-20">查看</view>
				</view>
			</view>
			<view class="z-font-24 uni-color-grey uni-mt-8">
				关联解决方案 {{ question.schemeList ? question.schemeList.length : 0 }} 个
			</view>
			<view class="uni-585C66 uni-mt-24 u-line-1">{{ question.description }}</view>
		</view>
	</navigator>
	<bottom-box v-if="startState == 1" :buts="buts" @change="butsFun"></bottom-box>
	<uni-popup ref="end" type="center">
		<view class="end-box">
			<view class="text-c">
				<image :src="setting.oss_pub_domain + '/app-img/course/end.png'" class="img"></image>
				<view class="uni-color-grey uni-mt-30">辛苦啦~今天的训练已完成，记录一下吧</view>
				<!-- <view class="z-font-36 uni-orange text-w uni-mt-18">总计用时：{{ courseInfo.totalTime }}</view> -->
			</view>
			<view class="text-w uni-mt-54">训练完成情况</view>
			<view style="max-height: 30vh; overflow: scroll">
				<view v-for="(question, index) in courseInfo.relQuestionSchemeList" :key="question.id" class="item">
					<view class="flex_sbc">
						<view class="u-line-1">{{ question.name }}</view>
						<view class="z-font-24 uni-color-main">
							{{
								courseInfo.result &&
								courseInfo.result[question.id] &&
								courseInfo.result[question.id].trainingState
									? '已解决'
									: '未解决'
							}}
						</view>
					</view>
					<view class="z-font-24 uni-color-grey uni-mt-8">
						关联解决方案{{ question.schemeList ? question.schemeList.length : 0 }}个
					</view>
				</view>
			</view>
			<view class="flex_cc">
				<view class="button-comm cancel" @click="end.close()">取消</view>
				<view class="button-comm submit" @click="endClass">确认提交</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import { editCoursePlan } from '@/api/player';
import { appointmentGiveLessonsDetail, getOpenCourseDetail } from '@/api/course';
import { courseOnlyStuDetail } from '@/api/student.js';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy: that } = getCurrentInstance(),
	eventChannel = that.getOpenerEventChannel(),
	startState = uni.getStorageSync('start-state');

const courseInfo = reactive({}),
	playerInfo = uni.getStorageSync('player-info');
let frist = true;
onShow(() => {
	if (!frist) eventChannel.emit('show');
	else frist = false;
	fetcData();
});
function fetcData(id) {
	const info = uni.getStorageSync('edit-course') || {};
	const funName = info.openCourse
		? getOpenCourseDetail
		: info.studentSide
		? courseOnlyStuDetail
		: appointmentGiveLessonsDetail;
	funName(info.id || courseInfo.id).then((res) => {
		Object.assign(courseInfo, res);
		if (courseInfo.status === 2)
			buts.value[1] = {
				label: '预约新课程',
				bgColor: 'uni-color-main-bg',
				width: 300
			};
		courseInfo.result = JSON.parse(courseInfo.result || '{}');
		uni.setStorageSync('edit-course', courseInfo);
	});
}
const buts = ref([
	{
		label: '发起评测',
		bgColor: 'uni-color-main-bg',
		width: 300
	},
	{
		label: '授课结束',
		bgColor: 'uni-red-bg',
		width: 300
	}
]);

function butsFun(e) {
	if (e) {
		if (courseInfo.status === 2) {
			uni.removeStorageSync('edit-course');
			uni.navigateTo({
				url: '/pages/player/course/course-edit'
			});
		} else {
			const difftime = parseInt((new Date().getTime() - new Date(courseInfo.beginTime).getTime()) / 1000);
			const days = parseInt(difftime / 86400);
			const hours = parseInt(difftime / 3600) - 24 * days;
			const minutes = parseInt((difftime % 3600) / 60);
			const seconds = parseInt(difftime % 60);
			courseInfo.totalTime = `${days && days + '天'}${hours && hours.toString().padStart(2, '0') + '时'}${
				minutes && minutes.toString().padStart(2, '0') + '分'
			}${seconds.toString().padStart(2, '0') + '秒'}`;
			end.value.open();
		}
	} else {
		uni.redirectTo({
			url: '/pages/player/evaluation/student-cpdetail/student-cpdetail'
		});
	}
}

const end = ref('');
function endClass() {
	editCoursePlan({ status: 2, stuId: playerInfo.id }, courseInfo.id).then((res) => {
		courseInfo.status = 2;
		buts.value[1] = {
			label: '预约新课程',
			bgColor: 'uni-color-main-bg',
			width: 300
		};
		end.value.close();
		that.tools.alert('授课已结束');
		eventChannel.emit('show', { status: 2 });
	});
}
</script>
<style lang="scss">
page {
	background: url($oss_pub_domain + '/app-img/course/detials-bg.png') no-repeat;
	background-size: 100% 100%;
	min-height: 100vh;
	box-sizing: border-box;
	padding: calc(var(--status-bar-height) + 76px) 32rpx 0;
}
</style>
<style lang="scss" scoped>
@import './detials.scss';
</style>
